<template>
    <el-page-header @back="eventClickGoback">
        <el-breadcrumb separator-class="el-icon-arrow-right" slot="content">
            <template v-for="(item, index) in dataset">
                <el-breadcrumb-item v-if="index == dataset.length - 1" :key="item.path">
                    {{ item.name }}
                </el-breadcrumb-item>
                <el-breadcrumb-item v-else :key="item.path" :to="item.path">
                    {{ item.name }}
                </el-breadcrumb-item>
            </template>
        </el-breadcrumb>
    </el-page-header>
</template>

<style lang="scss" scoped>
</style>

<script>
    import { PageHeader, Breadcrumb, BreadcrumbItem } from "element-ui";

    export default {
        name: "breadcrumb",
        components: {
            [PageHeader.name]: PageHeader,
            [Breadcrumb.name]: Breadcrumb, [BreadcrumbItem.name]: BreadcrumbItem
        },
        data () {
            return {
                dataset: []
            }
        },
        mounted () {
            this.buildBreadcrumbDataset();
        },
        watch: {
            $route() {
                this.buildBreadcrumbDataset();
            }
        },
        methods: {
            buildBreadcrumbDataset() {
                this.dataset = [
                    {
                        name: "首页", path: "/"
                    }
                ];

                var parent = this.$route.meta.menu.parent;
                if(parent && parent != this.$store.state.options.navigation[0].index) {
                    for(let x of this.$store.state.options.navigation) {
                        if(x.index == parent) {
                            this.dataset.push({
                                name: x.name, path: x.path
                            });
                            break;
                        }
                    }
                }

                this.dataset.push({
                    name: this.$route.meta.menu.name,
                    path: this.$route.path
                });
            },
            eventClickGoback() {
                this.$router.go(-1);
            }
        }
    };
</script>
